@use '@angular/material' as mat;

@use './app/pages/component-category-list/component-category-list-theme';
@use './app/pages/component-sidenav/component-sidenav-theme';
@use './app/pages/component-viewer/component-viewer-theme';
@use './app/pages/guide-list/guide-list-theme';
@use './app/pages/homepage/homepage-theme';
@use './app/pages/not-found/not-found-theme';
@use './app/pages/component-page-header/component-page-header-theme';
@use './app/shared/example-viewer/example-viewer-theme';
@use './app/shared/footer/footer-theme';
@use './app/shared/navbar/navbar-theme';
@use './app/shared/table-of-contents/table-of-contents-theme';
@use './app/shared/cookie-popup/cookie-popup-theme';
@use './app/shared/theme-picker/theme-picker-theme';
@use './styles/api-theme';
@use './styles/markdown-theme';
@use './styles/svg-theme';
@use './styles/tables-theme';

// Styles for the docs app that are based on the current theme.
@mixin theme($theme) {
  .docs-app-background {
    background: mat.get-theme-color($theme, surface);
  }

  .docs-help-support {
    color: mat.get-theme-color($theme, on-surface);

    a {
      color: mat.get-theme-color($theme, on-surface-variant);
    }
  }

  @include component-category-list-theme.theme($theme);
  @include component-sidenav-theme.theme($theme);
  @include component-viewer-theme.theme($theme);
  @include api-theme.theme($theme);
  @include markdown-theme.theme($theme);
  @include svg-theme.theme($theme);
  @include tables-theme.theme($theme);
  @include example-viewer-theme.theme($theme);
  @include footer-theme.theme($theme);
  @include guide-list-theme.theme($theme);
  @include homepage-theme.theme($theme);
  @include not-found-theme.theme($theme);
  @include navbar-theme.theme($theme);
  @include table-of-contents-theme.theme($theme);
  @include cookie-popup-theme.theme($theme);
  @include theme-picker-theme.theme($theme);
  @include component-page-header-theme.theme($theme);
}
